<template>
  <div>
    <Table
      :columns="columns"
      :data="orderList"
      ref="table"
      :loading="loading"
      highlight-row
      no-data-text="暂无数据"
      no-filtered-data-text="暂无筛选结果"
      @on-select="handleSelectRow"
      @on-select-cancel="handleCancelRow"
      @on-select-all="handleSelectAll"
      @on-select-all-cancel="handleSelectAll"
      class="orderData mt25"
    >
      <template slot-scope="{ row, index }" slot="image">
        <img style="margin: 0 auto;width:280px;height:auto;" :src="row.cover"></img>
      </template>
      <template slot-scope="{ row, index }" slot="action">
        <a @click="edit(row)">编辑</a>
        <Divider
          type="vertical"/>
		<a @click="del(row)">删除</a>
      </template>
    </Table>
    <div class="acea-row row-right page">
      <Page
        :total="page.total"
        :current="page.pageNum"
        show-elevator
        show-total
        @on-change="pageChange"
        :page-size="page.pageSize"
        @on-page-size-change="limitChange"
      />
    </div>
    
	
	<!--订单核销模态框-->
	<Modal v-model="modals2" title="拒绝原因" class="paymentFooter" scrollable width="400">
	  <Form
	    ref="refuseForm"
	    :model="refuseForm"
	    label-position="right"
	    class="tabform"
	    @submit.native.prevent
	  >
	    <FormItem prop="code" label-for="code">
	      <textarea
	        style="width: 100%;height:100px;"
	        placeholder="请输入拒绝原因"
	        v-model="refuseForm.content"
	      />
		  </textarea>
	    </FormItem>
	  </Form>
	  <div slot="footer">
	    <Button type="primary" @click="confirmRefuse()">确定拒绝</Button>
	    <Button @click="cancel()">取消</Button>
	  </div>
	</Modal>
  </div>
</template>

<script>
import {editFormApi,ListApi} from '@/api/repair';
import { mapState, mapMutations } from 'vuex';

export default {
  name: 'table_list',
  components: {
	  
  },
  data() {
    return {
      delfromData: {
		  
	  },
      modal: false,
	  modals2:false,
	  refuseForm:{
		  content:''
	  },
      orderList: [],
      // orderCards: [],
      loading: false,
      orderId: 0,
      total_num: 0,
      virtual_type: 0,
      status: 0,
      pay_type: '',
      columns: [
        {
          title: 'ID',
          align: 'center',
          key: 'id',
          width: 100,
        },
        {
          title: '名称',
          key: 'name',
          align: 'center',
          width: 200,
        },
        {
          title: '价格',
          key: 'price',
          align: 'center',
          width: 100,
        },
        {
          title: '描述',
          key: 'remark',
          align: 'left',
          width: 300,
        },
        {
          title: '操作',
          slot: 'action',
          fixed: 'right',
          width: 170,
          align: 'center',
        },
      ],
      page: {
        total: 0, // 总条数
        pageNum: 1, // 当前页
        pageSize: 10, // 每页显示条数
      },
      data: [],
      FromData: null,
      orderDatalist: null,
      // modalTitleSs: '',
      selectedIds: new Set(), //选中合并项的id
    };
  },
  computed: {
    ...mapState('order', ['orderPayType', 'orderStatus', 'orderTime', 'orderNum', 'fieldKey', 'orderType']),
  },
  mounted() {},
  created() {
    this.getList();
  },
  watch: {
    orderType: function () {
      this.page.pageNum = 1;
      this.getList();
    },
  },
  methods: {
    ...mapMutations('order', ['getIsDel', 'getisDelIdListl']),
    // 立即支付 /确认收货//删除单条订单
    submitModel() {
      this.getList();
    },
    pageChange(index) {
      this.page.pageNum = index;
      this.getList();
    },
    limitChange(limit) {
      this.page.pageSize = limit;
      this.getList();
    },
    // 订单列表
    getList(res) {
      this.page.pageNum = res === 1 ? 1 : this.page.pageNum;
      this.loading = true;
      ListApi({
        page: this.page.pageNum,
        limit: this.page.pageSize
      })
        .then(async (res) => {
          let data = res.data;
          this.orderList = data.list;
          // this.orderCards = data.stat;
          this.page.total = data.count;
          this.$nextTick(() => {
            //确保dom加载完毕
            this.setChecked();
          });
          this.$emit('on-changeCards', data.stat);
          this.loading = false;
        })
        .catch((res) => {
          this.loading = false;
          this.$Message.error(res.msg);
        });
    },
    // 全选
    // onSelectTab (selection) {
    //     let isDel = selection.some(item => {
    //         return item.is_del === 1
    //     });
    //     this.getIsDel(isDel);
    //     this.getisDelIdListl(selection);
    // },
    //全选和取消全选时触发
    handleSelectAll(selection) {
      if (selection.length === 0) {
        //获取table的数据；
        let data = this.$refs.table.data;
        data.forEach((item) => {
          if (this.selectedIds.has(item.id)) {
            this.selectedIds.delete(item.id);
          }
        });
      } else {
        selection.forEach((item) => {
          this.selectedIds.add(item.id);
        });
      }
      this.isDel(selection);
      this.$nextTick(() => {
        //确保dom加载完毕
        this.setChecked();
      });
    },
    //  选中某一行
    handleSelectRow(selection, row) {
      this.isDel(selection);
      this.selectedIds.add(row.id);
      this.$nextTick(() => {
        //确保dom加载完毕
        this.setChecked();
      });
    },
    //  取消某一行
    handleCancelRow(selection, row) {
      this.isDel(selection);
      this.selectedIds.delete(row.id);
      this.$nextTick(() => {
        //确保dom加载完毕
        this.setChecked();
      });
    },
    setChecked() {
      //将new Set()转化为数组
      let ids = [...this.selectedIds];
      this.getisDelIdListl(ids);
      // 找到绑定的table的ref对应的dom，找到table的objData对象，objData保存的是当前页的数据
      let objData = this.$refs.table.objData;
      for (let index in objData) {
        if (this.selectedIds.has(objData[index].id)) {
          objData[index]._isChecked = true;
        }
      }
    },
    isDel(selection) {
      if (selection.findIndex((target) => target.is_del === 0) == -1) {
        this.getIsDel(1);
      } else {
        this.getIsDel(0);
      }
    },
    // 修改成功
    submitFail() {
      this.getList();
      this.$emit('changeGetTabs');
    },
    change(status) {},
	//同意
	edit(row){
		console.info(row.id)
		this.$modalForm(editFormApi(row.id)).then(() => this.getList());
	},
	del(row){
		let delfromData = {
		  title: '提示',
		  num: 0,
		  url: `carousel/del/${row.id}`,
		  method: 'get'
		};
		this.$modalSure(delfromData)
		  .then((res) => {
		    this.$Message.success(res.msg);
		    this.getList();
		  })
		  .catch((res) => {
		    this.$Message.error(res.msg);
		  });
	},
	//拒绝
	refuse(row){
		this.modals2 = true;
		
	},
	cancel(){
		this.modals2 = false;
	}
  },
};
</script>

<style scoped lang="stylus">
img {
  height: 36px;
  display: block;
}

.tabBox {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 2px;

  .tabBox_img {
    width: 36px;
    height: 36px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .tabBox_tit {
    width: 60%;
    font-size: 12px !important;
    margin: 0 10px 0 10px;
    letter-spacing: 1px;
    padding: 5px 0;
    box-sizing: border-box;
  }
}

.orderData >>>.ivu-table-cell {
  padding-left: 0 !important;
}

.vertical-center-modal {
  display: flex;
  align-items: center;
  justify-content: center;
}

.nickname {
}

.uid {
  color: #2d8cf0;
}

.pink_name {
  color: #666;
}

.img {
  display: flex;
  flex-wrap: wrap;

  img {
    width: 30px;
    height: 30px;
    margin-right: 3px;
  }
}
</style>
